<template>
  <div class="evaluation-chart-container" ref="evaluationChart">
    <div class="chart" id="main"></div>
    <EvaluateInfo v-if="isShowFrame" :isShow="isShowFrame" @handleShowView="handleShowView" class="evaluation-info"/>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import EvaluateInfo from './evaluateInfo.vue';
type EChartsOption = echarts.EChartsOption; 

const chartDom = ref()
let option: EChartsOption
const evaluationChart = ref<HTMLElement>()

let chartHeight: number = 500
let chartWidth: number = 0
let level = 0 //数据层级

// 右侧详情显示标记
const isShowFrame = ref(false);

onMounted(() => {
    initChart()
})

const getData = () => {
  let data = {
    "name": "HRB400钢筋信息（1号生产线1）",
    "value": 1001,
    "dataNum": 98,
    "dataUnitNum": 2,
    "level": 1,
    "children": [
      {
        "name": "基本信息",
        "value": 1001,
        "dataNum": 98,
        "dataUnitNum": 2,
        "level": 2,
        "children": []
      },
      {
        "name": "评价评级信息",
        "value": 1002,
        "dataNum": 98,
        "dataUnitNum": 2,
        "level": 2,
        "children": [
          {
            "name": "评级信息",
            "value": 1003,
            "level": 3,
            "dataNum": 98,
            "dataUnitNum": 2,
            "children": []
          },
          {
            "name": "资源属性源生产数据",
            "value": 1004,
            "level": 3,
            "dataNum": 98,
            "dataUnitNum": 2,
            "children": []
          },
          {
            "name": "资源属性指标数据",
            "value": 1005,
            "level": 3,
            "dataNum": 98,
            "dataUnitNum": 2,
            "children": []
          },
        ]
      },
      {
        "name": "评级信息",
        "value": 1003,
        "dataNum": 98,
        "dataUnitNum": 2,
        "level": 2,
        "children": [
          {
            "name": "评级信息",
            "value": 1003,
            "level": 3,
            "dataNum": 98,
            "dataUnitNum": 2,
            "children": []
          },
          {
            "name": "资源属性源生产数据",
            "value": 1004,
            "level": 3,
            "dataNum": 98,
            "dataUnitNum": 2,
            "children": []
          },
          {
            "name": "资源属性指标数据",
            "value": 1005,
            "level": 3,
            "dataNum": 98,
            "dataUnitNum": 2,
            "children": []
          },
        ]
      },
      {
        "name": "资源属性源生产数据",
        "value": 1004,
        "dataNum": 98,
        "dataUnitNum": 2,
        "level": 2,
        "children": []
      },
      {
        "name": "资源属性指标数据",
        "value": 1005,
        "dataNum": 98,
        "dataUnitNum": 2,
        "level": 2,
        "children": []
      },
      {
        "name": "能源属性源生产数据",
        "value": 1006,
        "dataNum": 98,
        "dataUnitNum": 2,
        "level": 2,
        "children": []
      },
      {
        "name": "能源属性指标数据",
        "value": 1007,
        "dataNum": 98,
        "dataUnitNum": 2,
        "level": 2,
        "children": []
      },
      {
        "name": "环境属性源生产数据",
        "value": 1008,
        "dataNum": 98,
        "dataUnitNum": 2,
        "level": 2,
        "children": []
      },
      {
        "name": "环境属性指标数据",
        "value": 1009,
        "dataNum": 98,
        "dataUnitNum": 2,
        "level": 2,
        "children": []
      },
      {
        "name": "产品属性源生产数据",
        "value": 10010,
        "dataNum": 98,
        "dataUnitNum": 2,
        "level": 2,
        "children": []
      },
      {
        "name": "产品属性指标数据",
        "value": 10011,
        "dataNum": 98,
        "dataUnitNum": 2,
        "level": 2,
        "children": []
      },
      {
        "name": "低碳属性源生产数据",
        "value": 10012,
        "dataNum": 98,
        "dataUnitNum": 2,
        "level": 2,
        "children": []
      },
      {
        "name": "低碳属性指标数据1",
        "value": 1003,
        "dataNum": 98,
        "dataUnitNum": 2,
        "level": 2,
        "children": []
      }
      
    ]
  }

  return data
}

//获取树的层级
const getTreeDepth = (nodeTree: any) => {
  if (Object.keys(nodeTree).length==0) {
    return
  }
  if (nodeTree.children.length > 0) {
    nodeTree.children.forEach((item: any) => {
      getTreeDepth(item)
    })
  } else {
    if (level < nodeTree.level) {
      level = nodeTree.level
    }
  }
}

// 图表点击事件
const handleClick = (params: Object) => {
  isShowFrame.value = true
  console.log('-------params', params)
}

const initChart = () => {
  const data = getData()
  // const data = {}
  chartDom.value = document.getElementById('main');
  const myChart = echarts.init(chartDom.value);
  myChart.on('click', handleClick)  // 左击
  option = {
        backgroundColor: '#F7F8FA',
      tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove'
      },
      series: [
        {
          type: 'tree',
          data: [data],
          top: '50',
          left: '100',
          bottom: '50',
          right: '260',//箭头右边距离边界的距离
          symbol: 'arrow',
          // initialTreeDepth: 1,   // 一开始展开深度
          symbolSize: 7,
          symbolRotate: -90,
          symbolOffset: [0, 0],
          edgeShape: 'curve',
          //  edgeForkPosition: '50%',
          lineStyle: {
            color: '#E4E4E4',
            width: 2,
            curveness: 1
          },
          label: {
            fontSize: 14,
            shadowColor: "rgba(17,43,65,0.15)",
            shadowBlur: 5,
            shadowOffsetY: 1,
            // 在文本中，可以对部分文本采用 rich 中定义样式。
            // 这里需要在文本中使用标记符号：
            // `{styleName|text content text content}` 标记样式名。
            // 注意，换行仍是使用 '\n'。
            formatter: (params: Object|Array) => {
              // console.log('---------params', params)
              let data = []

              const nameStrs = params.name.split('')
              let nameArr = []
              let nameStr = ''
              // 标题太长换行 每行10个字
              for (let i = 0; i < nameStrs.length; i++) {
                nameStr += nameStrs[i]
                if(!((i+1) % 10)) {
                  nameArr.push(nameStr)
                  nameStr = ''
                }
              }
              if (nameStr) {
                nameArr.push(nameStr)
              }
              if (params.data.level > 1) {
                nameArr.forEach(item => {
                  data.push(`{itemLeft|}{itemTitle|${item}}`)
                })
                data.push(`{itemLeft|}{itemValue|数据单元：${params.data.dataUnitNum} 数据项：${params.value}个}`)
              } else {
                nameArr.forEach(item => {
                  data.push(`{title|${item}}`)
                })
              }
              return data.join('\n')
            },
            rich: {
              //左侧边框
              itemLeft: {
                backgroundColor: '#41A8B6',
                padding: [12,0,12,3],
                lineHeight: 25,
              },
              //子节点标题
              itemTitle: {
                  color: '#24697A',
                  lineHeight: 25,
                  fontSize: 14,
                  width: 180,
                  padding: 12,
                  backgroundColor: '#ffffff',
              },
              //子节点值
              itemValue: {
                  lineHeight: 25,
                  fontWeight: 400,
                  color: '#676A6C',
                  width: 180,
                  padding: 12,
                  backgroundColor: '#ffffff',
              },
              //父节点
              title: {
                  backgroundColor: '#24697A',
                  color: '#ffffff',
                  lineHeight: 24,
                  fontSize: 16,
                  fontWeight: 500,
                  padding: [10, 20],
                  width: 133,
              },
            }
          },
          leaves: {
            label: {
              position: 'right',
              verticalAlign: 'middle',
            }
          },
          expandAndCollapse: true,
          animationDuration: 550,
          animationDurationUpdate: 750
        }
      ]
    }
    myChart.setOption(option)
    // 计算需要展示的高度和宽度
    var allNode=0;
    var nodes=myChart._chartsViews[0]._data._graphicEls;
    for(var i=0,count =nodes.length;i<count;i++) {
      var node=nodes[i];
      if(node===undefined)
          continue;
      allNode++;
    }
    getTreeDepth(data)
    chartHeight = allNode * 75
    chartWidth = level > 2 ? (level-2) * 440 + 580 : 580
    myChart.resize({height: chartHeight,width: chartWidth})//设置图表动态高度&宽度
}

const handleShowView = ()=>{
    isShowFrame.value = !isShowFrame.value
}
</script>
<style lang="scss" scoped>
    .evaluation-chart-container {
        margin: 14px 0 32px 0;
        padding-bottom: 32px;
        background-color: #F7F8FA;
        // height: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        .chart {
          margin: 30px;
          // min-height: 100%;
          display: flex;
          justify-content: center; /* 水平居中 */
          align-items: center;     /* 垂直居中 */
        }
    }
</style>
